<template>
  <view class="login-page__H5 flex-col flex-c-m">
    <!-- 图标 -->
    <!-- 登录表单 h5唯一登录方式 -->
    <view class="form-box">
      <zm-image :src="logo" :is-join="false" custom-style="width:152rpx;height:118rpx;margin:80rpx auto 75rpx"></zm-image>
      <view>
        <!-- 账号 -->
        <zm-input
          type="number"
          placeholder="请输入手机号"
          class="input"
          :custom-style="{
            border: '1rpx solid #eee',
            padding: '20rpx',
            borderRadius: '18rpx'
          }"
          :placeholder-style="{ color: '#323233', fontSize: '30rpx' }"
          :prefix-icon-style="{ marginRight: '18rpx' }"
          :prefix-icon="'login-tel'"
          v-model="form.mobile"
          @input="handleMobileInput"
        />
        <!-- 密码 -->
        <zm-input
          type="password"
          placeholder="请输入密码"
          class="input mt20"
          :icon-size="'25'"
          :custom-style="{
            border: '1rpx solid #eee',
            padding: '20rpx',
            borderRadius: '18rpx'
          }"
          :placeholder-style="{ color: '#323233', fontSize: '30rpx' }"
          :prefix-icon-style="{ marginRight: '20rpx' }"
          :prefix-icon="'login-password'"
          v-if="type === '2'"
          v-model="form.password"
          @input="handlePwdInput"
        />
        <!-- 验证码 -->
        <view class="flex mt20">
          <zm-input
            type="number"
            :maxlength="6"
            placeholder="请输入验证码"
            class="input flex1 mr25"
            :custom-style="{
              border: '1rpx solid #eee',
              padding: '20rpx',
              borderRadius: '18rpx'
            }"
            :placeholder-style="{ color: '#323233', fontSize: '30rpx' }"
            :prefix-icon-style="{ marginRight: '18rpx' }"
            :prefix-icon="'login-code'"
            v-if="type === '1'"
            v-model="form.code"
            @input="handleCodeInput"
          >
          </zm-input>
          <yy-send-code :second="expire" @myTap="handleSendCode" @finish="handleCountDownFinish" type="auto" ref="sendCode" />
        </view>
      </view>
      <!-- 提交按钮 -->
      <yy-button
        custom-class="login-btn"
        :custom-style="{
          height: '100rpx',
          borderRadius: '18rpx',
          fontSize: '32rpx',
          background: 'linear-gradient(135deg, #55BAFF 0%, #23E6D8 100%)',
          border: 'unset'
        }"
        :disabled="isDisabled"
        @click="handleLogin"
        >登录</yy-button
      >
      <!-- 其他方式 -->
      <!-- <view class="other flex-b-m fc-blue fs26">
        <view @click="handleForgetPwd">忘记密码</view>
        <view @click="changeType">{{ typeChangeTxt(type) }}</view>
      </view> -->
    </view>
    <view class="wxLogin" @click="onWxLogin">
      <zm-image src="https://public-oss-file.zmaxfilm.com/applet/img/my/wx-logo.png" :is-join="false" custom-style="width:128rpx;height:103rpx;margin:0 auto"></zm-image>
      <view class="text">微信快捷登录</view>
    </view>
  </view>
</template>

<script>
  /*
   *@Author: hongChengHao
   *@Date: 2022-09-06 16:15:29
   *@Description: 模块描述
   */
  import ZmImage from '@/commons/ZmImage/index.vue'
  import ZmInput from '@/commons/ZmInput/index.vue'
  //   import UserAgree from '@/components/UserAgree.vue'

  import { toast } from '@/utils/message'
  import * as utils from '@/utils/index'
  import { Encrypt } from '@/utils/encryption.js'
  import * as auth from '@/utils/auth'
  export default {
    name: 'login-h5',
    components: {
      ZmImage,
      ZmInput
    },
    props: {
      //   form: {
      //     type: Object,
      //     default: () => {
      //       return {}
      //     }
      //   },
      logo: {
        type: String,
        default: ''
      }
      //   type: {
      //     type: String,
      //     default: ''
      //   }
    },
    data() {
      return {
        expire: 60,
        isDisabled: true,
        checked: true,
        type: '1', // 登录类型   1 登录注册  2、账号密码登录
        isSend: false, // 是否发送验证码
        form: {
          mobile: '', //测试账号
          code: '',
          password: '' //测试账号密码
        },
        userInfoEncrypted: {
          iv: '',
          encryptedData: '',
          mobileEncryptedData: '',
          mobileIv: ''
        }
      }
    },
    computed: {
      disabledBtn() {
        return !this.checked || !this.form.mobile || !this.form.password
      }
    },
    methods: {
      handleSendCode() {
        if (!this.form.mobile) {
          toast('请输入手机号')
          return
        }
        const data = {
          mobile: this.form.mobile,
          codeType: 'login',
          deviceType: 'h5'
        }
        uni.$api.public
          .sendSms(data)
          .then((res) => {
            this.isSend = true
            toast('短信验证码发送成功')
            console.log('res.expire', res.expire)
            this.expire = +res.expire || 60
            const sendCodeRef = this.$refs.sendCode
            this.$nextTick(() => {
              sendCodeRef.begin()
            })
          })
          .catch((err) => {
            toast((err.data && err.data.content) || '发送失败,请稍后再试')
            this.isSend = true
            this.form.code = ''
            const timer = setTimeout(() => {
              clearTimeout(timer)
              this.isSend = false //5秒后可重新发送验证码
            }, 5000)
          })
      },
      handleLogin() {
        if (this.isDisabled) {
          //按钮禁用
          return
        }
        const msg = this.validateInput()
        if (msg) {
          toast(msg)
          return
        }
        if (this.type === '1' && !this.isSend) {
          toast('请先发送短信获取验证码')
          this.form.code = ''
          return
        }
        this.handleSubmit(this.form.code)
      },
      handleSubmit(code) {
        if (code) {
          this.form.code = code
        }
        if (this.type === '1') {
          this.form.password = ''
        } else if (this.type === '2') {
          this.form.code = ''
        }
        const form = this.handleForm()
        uni.$api.public
          .mobileLogin(form)
          .then(() => {
            // this.isLogin = true
            // const token = res.data
            getApp().globalData.isReload = '1'
            auth.toGetUserInfo(true).then((res) => {
              console.log('res222', res)
              this.$emit('loginCb', res)
              //   this.loginCb(res)
              getApp().globalData.isReload = ''
            })
            // this.loginCb(res)
            // auth.getUserInfo(true).then(async () => {
            //   const redirect = this.$route.query.redirect
            //   this.$msg.hide()
            //   auth.getUserInfo(true)
            //   await this.checkBindCard()
            //   if (redirect) {
            //     this.$router.go(-1)
            //   } else {
            //     this.$router.replace('/index/home')
            //   }
            //   setTimeout(() => {
            //     this.$root.reload()
            //   }, 300)
            // })
          })
          .catch(() => {
            if (this.type === '1') {
              this.form.code = '' //登录失败 包括token失效
              this.isDisabled = true
            }
          })
      },
      typeChangeTxt(v) {
        return v === '1' ? '使用密码登录' : '验证码登录'
      },
      handlePwdInput(val) {
        this.form.password = val
        this.changeDisabledStatus()
      },
      handleCountDownFinish() {
        this.isSend = false
      },
      handleForm() {
        const form = utils.deep(this.form)
        const { password } = form
        if (!password) {
          return form
        }
        const str = JSON.stringify({ password })
        form.password = Encrypt(str)
        return form
      },
      handleCodeInput(code) {
        if (code && code.length === 6) {
          //输入6位验证码
          this.form.code = code
        }
        this.changeDisabledStatus()
      },
      handleMobileInput(val) {
        this.form.mobile = val
        this.changeDisabledStatus()
      },
      // handleForgetPwd() {
      //   uni.navigateTo({
      //     url: '/subPages/login/forgetPwd'
      //   })
      // },
      changeType() {
        this.isSend = false //解开发送标识
        this.type = this.type === '1' ? '2' : '1'
        this.changeDisabledStatus()
      },
      changeDisabledStatus() {
        if (this.type === '2') {
          //密码登录
          if (this.form.mobile && this.form.password) {
            this.isDisabled = false
          } else {
            this.isDisabled = true
          }
        } else {
          //验证码登录
          if (this.form.mobile && this.form.code) {
            this.isDisabled = false
          } else {
            this.isDisabled = true
          }
        }
      },
      validateInput() {
        let str = ''
        if (!this.form.mobile) {
          str = '手机号不能为空'
        } else if (!auth.validateTel(this.form.mobile)) {
          str = '手机号输入有误'
        }
        return str
      },
      changeChecked() {
        this.checked = !this.checked
      },
      onWxLogin() {
        this.$emit('ganTestUserInfo')
        // const backUrl = encodeURIComponent(window.location.href)
        // const appid = 'wx51e63e517dd2cd9e'
        // const scope = 'snsapi_base'
        // window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${backUrl}&response_type=code&scope=${scope}&state=123#wechat_redirect`
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login-page__H5 {
    .logo {
      width: 540rpx;
      height: 180rpx;
    }
    .form-box {
      width: 100%;
      font-size: 32rpx;
      //   margin-top: 80rpx;
      .title {
        font-size: 48rpx;
        color: #222;
        font-weight: bold;
        margin-bottom: 100rpx;
      }
      .login-btn {
        margin-top: 33rpx;
      }
      // .sendCode {
      //   font-size: 26rpx;
      // }
    }
    .other {
      width: 100%;
      margin-top: 30rpx;
    }
    .text {
      margin-top: 23rpx;
      font-size: 30rpx;
      font-weight: bold;
      color: #3bc5d2;
    }
    .wxLogin {
      margin-top: 112rpx;
    }
  }
</style>
